<template>
  <div>
    <van-tabbar active-color="red" inactive-color="#000" fixed route @change="handChange" >
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="search" dot>分类</van-tabbar-item>
      <van-tabbar-item replace to="/shopcart" icon="friends-o" v-if="badeCount > 0" :badge="badeCount">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/shopcart" icon="friends-o" v-else>购物车</van-tabbar-item>
      <van-tabbar-item replace to="/user" icon="setting-o" :badge="userNumber">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  data() {
    return {
      carNumber: 30,
      userNumber: 20,
    };
  },
  computed: {
    ...mapState(['badeCount'])
  },
  created() {
    console.log(this.badeCount);
  },
  methods: {
    handChange(index) {
      // console.log('index', index);
      if (index == 2) {
        // 解决全局路由守卫，将路由跳转至登录页而报的错误
        this.$router.push('/shopcart').catch(() => {
        })
      }
      if (index == 3) {
        this.$router.push('/user').catch(() => {
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>